<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="https://e.im5i.com/2021/07/29/t8zOY.png" alt="">
        <!-- <img src="" alt=""> -->
      </div>
      <el-tabs v-model="activeName" class="login_form" :stretch="true">
        <el-tab-pane label="登录" name="login">
          <!-- 登录表单区域 -->
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                prefix-icon="el-icon-user"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="$refs.loginFormRef.resetFields()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="reguser" v-if="false">
          <!-- 注册表单区域 -->
          <el-form
            ref="reguserFormRef"
            :model="reguserForm"
            :rules="reguserFormRules"
            label-width="0px"
          >
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                v-model="reguserForm.username"
                prefix-icon="el-icon-user"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                v-model="reguserForm.password"
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="verCode">
              <el-col :span="14"
                ><el-input
                  v-model="reguserForm.verCode"
                  prefix-icon="el-icon-edit-outline"
                  placeholder="请输入验证码"
                  maxlength="6"
                ></el-input
              ></el-col>
              <el-col :span="10" @click.native="generateMixed(6)"
                ><verCode :randomString="randomString"></verCode
              ></el-col>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="reguser">注册</el-button>
              <el-button type="info" @click="resetloginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { api } from '@/api/user.js'
import verCode from '@/components/verCode.vue'
export default {
  components: { verCode },
  data() {
    // 自定义校验规则 验证验证码
    var checkCode = (rule, value, cb) => {
      if (value.length !== 6) return cb(new Error('请输入6位验证码'))
      if (value.toUpperCase() !== this.randomString.toUpperCase()) return cb(new Error('验证码错误'))
      return cb()
    }
    return {
      activeName: 'login',
      randomString: '',
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'test003',
        password: '123456'
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      reguserForm: {
        username: '',
        password: '',
        verCode: ''
      },
      // 这是表单的验证规则对象
      reguserFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        // 验证验证码是否合法
        verCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.generateMixed(6)
  },
  methods: {
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await api.login(this.loginForm)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.message)
        // 1.将登录成功之后的 token ,保存到 store 中
        this.$store.commit('setUserToken', res.token)
        this.$router.push('/')
        setTimeout(_ => this.$message.success('登录成功'), 700)
      })
    },
    reguser() {
      console.log(this.$refs.reguserFormRef)
      this.$refs.reguserFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await api.reguser(this.reguserForm)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.message)
        this.$message.success('注册成功')
        this.loginForm = this.reguserForm
      })
    },
    // 重置注册
    resetloginForm() {
      this.$refs.reguserFormRef.resetFields()
      this.generateMixed(6)
    },
    // 随机字符串
    generateMixed(n) {
      const chars = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
      let res = ''
      for (let i = 0; i < n; i++) {
        const id = Math.ceil(Math.random() * 35)
        res += chars[id]
      }
      this.randomString = res
      return true
    }
  }
}
</script>

<style scoped lang="less">
.login_container {
  // background-color: #2b4b6b;
  background: url(https://e.im5i.com/2021/07/29/t89hF.png) no-repeat;
  background-size: 100% 100%;
  height: 100%;
  .login_box {
    opacity: 0.7;
    width: 450px;
    background-color: #fff;
    // background: url(../assets/car.gif);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // 头像区域
    .avatar_box {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .login_form {
      margin-top: 80px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .btns {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
